<template>
    <cl-crud :ref="setRefs('crud')" @load="onLoad">
        <el-row type="flex" align="middle">
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key />
        </el-row>

        <el-row>
            <!-- 数据表格 -->
            <cl-table :ref="setRefs('table')" v-bind="table" >
                <template #column-headimgurl="{ scope }">
					<cl-avatar
						class="cover"
						:src="scope.row.headimgurl"
						:style="{ margin: 'auto' }"
					/>
				</template>
            </cl-table>
        </el-row>

        <el-row type="flex">
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </el-row>

        <!-- 新增、编辑 -->
        <cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
    </cl-crud>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useCool } from "/@/core";

export default defineComponent({
    setup() {
        // 功能
        const { refs, setRefs, service } = useCool();

        // 新增、编辑配置
        const upsert = reactive<Upsert>({
            items: []
        });

        // 表格配置
        const table = reactive<Table>({
            "context-menu": ["refresh"],
			props: {
				"default-sort": {
					prop: "createTime",
					order: "descending"
				}
			},
			columns: [
                {
                    type: "selection",
                    align: "center",
                    width: 60
                },
				{
					type: "index",
					label: "#",
					width: 60
				},
				{
					prop: "nickname",
					label: "昵称",
					minWidth: 150
				},
                {
					prop: "headimgurl",
					label: "头像"
				},
				{
					prop: "action",
					label: "请求地址",
					minWidth: 200,
					showOverflowTooltip: true
				},
				{
					prop: "params",
					label: "参数",
					align: "center",
					minWidth: 200,
					showOverflowTooltip: true
				},
				{
					prop: "ip",
					label: "ip",
					minWidth: 180
				},
				{
					prop: "ip_addr",
					label: "ip地址",
					minWidth: 150
				},
				{
					prop: "createTime",
					label: "创建时间",
					minWidth: 150,
					sortable: true
				},
                {
                    type: "op",
                    align: "center",
                    buttons: ["delete"]
                }
			]
        });

        // crud 加载
        function onLoad({ ctx, app }: CrudLoad) {
            // 绑定 service
            ctx.service(service.user.userLog).done();
            app.refresh();
        }

        return {
            refs,
            setRefs,
            upsert,
            table,
            onLoad
        };
    }
});
</script>
